---
order: 2
title: Sprite Renderer
type: Graphics
group: 2D
label: Graphics/2D
---

The [SpriteRenderer](/apis/core/#SpriteRenderer) component is used to display images in 3D/2D scenes.

## Properties

In the editor, you can conveniently view and set the properties of a sprite renderer:

<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*Q_d5Rqmttr4AAAAAAAAAAAAAehuCAQ/original" alt="image-20231007153753006" style={{ zoom: "50%" }} />

| Property Name                                                       | Property Type                                                  | Description                                                                                              |
| :----------------------------------------------------------- | :-------------------------------------------------------- | :------------------------------------------------------------------------------------------------ |
| [sprite](/apis/core/#SpriteRenderer-sprite)                   | [Sprite](/apis/core/#Sprite)                               | A reference to the sprite to use                                                                                    |
| [width](/apis/core/#SpriteRenderer-width)                     | Number                                                    | Width of the sprite renderer. If not customized by the developer, it defaults to the sprite's width (in world space units)                                      |
| [height](/apis/core/#SpriteRenderer-height)                   | Number                                                    | Height of the sprite renderer. If not customized by the developer, it defaults to the sprite's height (in world space units)                                      |
| [color](/apis/core/#SpriteRenderer-color)                     | [Color](/apis/math/#Color)                                 | Color of the sprite                                                                                          |
| [flipX](/apis/core/#SpriteRenderer-flipX)                     | Boolean                                                   | Whether to flip on the X-axis during rendering                                                                               |
| [flipY](/apis/core/#SpriteRenderer-flipY)                     | Boolean                                                   | Whether to flip on the Y-axis during rendering                                                                               |
| [drawMode](/apis/core/#SpriteRenderer-drawMode)               | [SpriteDrawMode](/apis/core/#SpriteDrawMode)               | Drawing mode, supports normal, nine-slice, and tiling modes                                                            |
| [maskInteraction](/apis/core/#SpriteRenderer-maskInteraction) | [SpriteMaskInteraction](/apis/core/#SpriteMaskInteraction) | Mask type, used to specify whether the sprite needs masking and whether to show content inside or outside the mask when masked            |
| [maskLayer](/apis/core/#SpriteRenderer-maskLayer)             | [SpriteMaskLayer](/apis/core/#SpriteMaskLayer)             | The mask layer to which the sprite belongs, used to match with SpriteMask. Defaults to Everything, meaning it can mask with any SpriteMask |
| [material](/apis/core/#SpriteRenderer-setMaterial)            | [Material](/apis/core/#Material)                           | [Material](/en/docs/graphics/material/material/) information for the sprite renderer |
| [priority](/apis/core/#SpriteRenderer-priority)               | Number                                                    | Render priority of the sprite renderer. Lower values indicate higher priority. Defaults to 0 |

<Callout type="info">**Render Priority**, **the distance between the bounding box and the camera**, etc., collectively determine the rendering order of renderers. For details, see [Render Order](/en/docs/graphics/renderer/order/)</Callout>

## Usage

In the **[Hierarchy Panel](/en/docs/interface/hierarchy)**, **right-click** -> **2D Object** -> **Sprite Renderer** to quickly create a node containing a sprite renderer.

<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*ABuGRoF5B4oAAAAAgJAAAAgAehuCAQ/original" alt="avatar" style={{zoom:"50%"}} />

<Callout type="info">Mask effects require the use of [Sprite Mask](/en/docs/graphics/2D/spriteMask/)</Callout>